/*
*@date:20180902
*@author: wj 
*@description: 按YLJ的接口文档《测试接口文档.docx》，5.查询违法基本信息 底层cmd：04C01
*              此接口为查询已生成违章处罚决定书的违章,即分已经被扣除,可以在此基础上进行操作：
*              银行对账录入 -- 用户进行缴费并完成违章处理。使用接口：银行对账录入接口04C51
*              
*/

<template>
    <div class="sys-page">
        <app-title :title="dialogTitle"></app-title>
        <app-notes>通过决定书编码查询已经确认的违章，可以进行缴款操作来处理违章。</app-notes>
        
        <el-row>
            <el-col :span="20">
                <app-search>
                    <el-form :inline="true" :model="searchForm" :rules="searchRules" ref="searchForm">
                        <el-form-item prop="jdsbh">
                            <el-input v-model="searchForm.jdsbh" placeholder="请输入处罚决定书编号" ref="jdsbh"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </app-search>
            </el-col>
        </el-row>    
            <el-table v-loading="loading" border :data="tableData" :row-class-name="tableRowClassName">
                <el-table-column label="号牌号码" width="100" prop="hphm"></el-table-column>
                <el-table-column label="违章时间" width="180" prop="wfsj"></el-table-column>
                <el-table-column label="违章行为" width="180" prop="wfxw"></el-table-column>
                <el-table-column label="违章记分" width="180" prop="wfjfs"></el-table-column>
                <el-table-column label="罚款金额" width="180" prop="fkje"></el-table-column>
                <el-table-column label="应收滞纳金" width="180" prop="ysznj"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" border @click="violateProcess(scope.row)">违章处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-alert :title="errorMsg" type="warning" :closable="false" show-icon v-show="!reliable"> </el-alert>


            <el-dialog title="违章缴费录入接口" :visible.sync="dialogFineFormVisible" width='50%'
            :fullscreen='false'>
            <el-form :model="fineForm" ref="addForm"  >
            <el-form-item label="决定书编号" label-width="120px">
                <el-input ref="name" v-model="fineForm.jdsbh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="当事人" label-width="120px">
                <el-input ref="name" v-model="fineForm.dsr" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="证件号码" label-width="120px">
                <el-input ref="name" v-model="fineForm.zjhm" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="罚款金额" label-width="120px">
                <el-input ref="name" v-model="fineForm.fkje" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="滞纳金" label-width="120px">
                <el-input ref="name" v-model="fineForm.znj" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="交款日期" label-width="120px">
                <el-input ref="name" v-model="fineForm.jkrq" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="罚款收据编号" label-width="120px">
                <el-input ref="name" v-model="fineForm.fksjbh" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="收款机关" label-width="120px">
                <el-input ref="name" v-model="fineForm.skjg" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="录入人" label-width="120px">
                <el-input ref="name" v-model="fineForm.lrr" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
            <!--end-->
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFineFormVisible = false">取 消</el-button>
            <el-button type="primary" v-loading="loading"
            @click.native.prevent="addCommit('modform')">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>
<style>
  .el-table .warning-row {
    background: #F08080;
  }

  .el-table .success-row {
    background:#f0f9eb;
  }
</style>

<script>
export default {
    data(){
        return {
            url:  '../../trffweb/services/TmriOutAccess/queryObjectOut5.shtml',
            url2: '../../trffweb/services/TmriOutAccess/writeObjectOut2.shtml',
            dialogTitle:"违章处罚决定书查询处理",
            dialogFineFormVisible: false,
            loading: false,
            processDlgVisible:false,
            tableData:[],
            errorMsg:"您的信息有误，请联系管理员修改",
            reliable:true,
            searchForm: {
                jdsbh: '',
                jkbj: '0' 
            },
            fineForm: {
                /**********************************************/
                //wj20180907：用户输入表单，从row数据来，现在暂时用静态数据
                jdsbh:'1234567890123',
                dsr: '王杰',
                zjhm: '421003198810151234',
                fkje: '200',
                znj: '200',
                jkrq: '2018-09-07', //暂时静态写入
                fksjbh: '89-3923890', //由银行缴款后银行返回的字段，暂时静态写入
                skjg: '中国农业银行茂名支行', //暂时静态写入
                lrr: '接口写入'
            },

             searchRules: {
                jdsbh: [
                    { required:true, message: '请输入处罚决定书编号', trigger: 'blur' }
                ]
            }

       }
    },
    mounted(){
    },
    methods:{
        tableRowClassName({row, rowIndex}) {
          if(this.reliable === false){
            return 'warning-row';
          }else{
              return 'success-row'
          }
        },
        search(){
            this.$refs.searchForm.validate((valid)=>
            {
                if(valid){
                    
                    this.HTTP.methods.apiPost(this.url, this.searchForm).then(res =>
                    {
                        if(res.code != 200){
                            this.$message({
                            message: res.msg,
                            type: 'error'
                            })                              
                        }else{
                            if(res.data.length > 0){
                                this.tableData = res.data
                                this.fineForm.jdsbh = res.data[0].jdsbh
                            }
                            this.loading = false
                        }
                    })
                }
            })                 
        },
        addCommit(){
            this.fineForm.xtlb = '01'
            this.fineForm.jkxlh = ''
            this.HTTP.methods.apiPost(this.url2, this.fineForm).then(res =>
            {
                if(res.code != 200){
                    this.$message({
                    message: '提交失败',
                    type: 'error'
                    })                              
                }else{
                    this.$message({
                    message: '提交成功',
                    type: 'success'
                    }) 
                    this.dialogFineFormVisible = false  
                }
                
            })
        },
       
        violateProcess(row){
            this.dialogFineFormVisible = true
            console.log(row)
            this.fineForm.jdsbh = row.jdsbh
        }
    }
}
</script>

    
